<template>
  <div class="login">
    <Top></Top>
    <div class="bg">
    <div class="main">
      <img src="@/assets/images/main.png" alt="" />
      <div class="loginbox">
        <h3>手机号验证登录</h3>
        <input
          class="login-input"
          type="text"
          v-model="username"
          placeholder="请输入账号"
        />
        <div class="pr">
          <input
          class="login-input"
          type="password"
          v-model="password"
          placeholder="请输入验证码"
        />
        <p class="pa reSend active"><span>获取验证码</span></p>
        </div>
        
        <div class="login-button" @click="login" type="submit">登陆</div>
      </div>
    </div>
  </div>
  <div style="text-align:center;color:#676767;padding:30px 0 0">xxxxxxxxxxxxx有限公司 ©2015-2016版权所有。京ICP备15027356号。</div>
  </div>
  
</template>
<script>
import Top from '@/components/layout/top'
export default {
  components:{
    Top
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
};
</script>
<style scoped>
.bg {
  width: 100%;
  height: 580px;
  background: linear-gradient(90deg, #6fb2ff, #095fff);
}
.pr{
  position: relative;
}
.pa{
  position: absolute;
}
.reSend.active{
  color: #1481b8!important;
  cursor: pointer;
  right: 15px;
  top: 10px;
}
.main {
  width: 1100px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loginbox {
  border: 5px solid #619aff;
  width: 354px;
  height: 383px;
  background-color: #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.loginbox h3 {
  font-size: 24px;
  color: #5099ff;
  font-weight: normal;
  margin: 25px 0;
}
.loginbox .login-input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 25px;
}
.login-button {
  color: #fff;
  padding: 10px;
  font-size: 22px;
  text-align: center;
  background: linear-gradient(90deg, #6fb2ff, #095fff);
  box-shadow: 0px 5px 10px 0px rgba(50, 129, 255, 0.51);
  border-radius: 5px;
}
</style>